<template>
  <view class="cart-container">
    <!-- 购物车为空时显示 -->
    <view class="empty-cart" v-if="cartList.length === 0">
      <image src="/static/empty-cart.png" mode="aspectFit"></image>
      <text>购物车还是空的</text>
      <button class="go-shopping" @click="goShopping">去逛逛</button>
    </view>

    <!-- 购物车列表 -->
    <view class="cart-list" v-else>
      <view class="cart-item" v-for="(item, index) in cartList" :key="index">
        <view class="item-left">
          <checkbox :checked="item.selected" @click="toggleSelect(index)" />
        </view>
        <view class="item-content">
          <image :src="item.image" mode="aspectFill"></image>
          <view class="item-info">
            <text class="item-title">{{item.title}}</text>
            <text class="item-price">¥{{item.price}}</text>
            <view class="item-quantity">
              <text class="minus" @click="decreaseQuantity(index)">-</text>
              <input type="number" v-model="item.quantity" @blur="updateQuantity(index)" />
              <text class="plus" @click="increaseQuantity(index)">+</text>
            </view>
          </view>
        </view>
        <view class="item-right">
          <text class="delete" @click="deleteItem(index)">删除</text>
        </view>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="checkout-bar" v-if="cartList.length > 0">
      <view class="select-all">
        <checkbox :checked="isAllSelected" @click="toggleSelectAll" />
        <text>全选</text>
      </view>
      <view class="total">
        <text>合计：</text>
        <text class="total-price">¥{{totalPrice}}</text>
      </view>
      <button class="checkout-btn" @click="checkout">结算({{selectedCount}})</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: [],
      isAllSelected: false
    }
  },
  computed: {
    totalPrice() {
      return this.cartList
        .filter(item => item.selected)
        .reduce((total, item) => total + item.price * item.quantity, 0)
        .toFixed(2)
    },
    selectedCount() {
      return this.cartList.filter(item => item.selected).length
    }
  },
  onShow() {
    this.getCartList()
  },
  methods: {
    // 获取购物车列表
    getCartList() {
      // 这里应该调用后端接口获取购物车数据
      // 模拟数据
      this.cartList = [
        {
          id: 1,
          title: '商品1',
          price: 99.00,
          image: '/static/product1.jpg',
          quantity: 1,
          selected: false
        },
        {
          id: 2,
          title: '商品2',
          price: 199.00,
          image: '/static/product2.jpg',
          quantity: 2,
          selected: false
        }
      ]
    },
    // 切换商品选中状态
    toggleSelect(index) {
      this.cartList[index].selected = !this.cartList[index].selected
      this.checkAllSelected()
    },
    // 切换全选状态
    toggleSelectAll() {
      this.isAllSelected = !this.isAllSelected
      this.cartList.forEach(item => {
        item.selected = this.isAllSelected
      })
    },
    // 检查是否全选
    checkAllSelected() {
      this.isAllSelected = this.cartList.every(item => item.selected)
    },
    // 增加商品数量
    increaseQuantity(index) {
      this.cartList[index].quantity++
      this.updateCart()
    },
    // 减少商品数量
    decreaseQuantity(index) {
      if (this.cartList[index].quantity > 1) {
        this.cartList[index].quantity--
        this.updateCart()
      }
    },
    // 更新商品数量
    updateQuantity(index) {
      if (this.cartList[index].quantity < 1) {
        this.cartList[index].quantity = 1
      }
      this.updateCart()
    },
    // 删除商品
    deleteItem(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这个商品吗？',
        success: (res) => {
          if (res.confirm) {
            this.cartList.splice(index, 1)
            this.updateCart()
          }
        }
      })
    },
    // 更新购物车
    updateCart() {
      // 这里应该调用后端接口更新购物车数据
      console.log('更新购物车数据')
    },
    // 去购物
    goShopping() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    // 结算
    checkout() {
      if (this.selectedCount === 0) {
        uni.showToast({
          title: '请选择要结算的商品',
          icon: 'none'
        })
        return
      }
      // 跳转到结算页面
      uni.navigateTo({
        url: '/pages/order/checkout'
      })
    }
  }
}
</script>

<style>
.cart-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 100rpx;
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
}

.empty-cart image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-cart text {
  color: #999;
  font-size: 28rpx;
  margin-bottom: 30rpx;
}

.go-shopping {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: linear-gradient(to right, #60A0D4, #4A90E2);
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
}

.cart-list {
  padding: 20rpx;
}

.cart-item {
  display: flex;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.item-left {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.item-content {
  flex: 1;
  display: flex;
}

.item-content image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
}

.item-price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
}

.item-quantity text {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1px solid #ddd;
  font-size: 28rpx;
}

.item-quantity input {
  width: 80rpx;
  height: 50rpx;
  text-align: center;
  border: 1px solid #ddd;
  margin: 0 10rpx;
}

.item-right {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.delete {
  color: #999;
  font-size: 24rpx;
}

.checkout-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1px solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.select-all text {
  font-size: 28rpx;
  color: #333;
  margin-left: 10rpx;
}

.total {
  flex: 1;
  text-align: right;
  margin-right: 20rpx;
}

.total-price {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
}

.checkout-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: linear-gradient(to right, #60A0D4, #4A90E2);
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
}
</style>